<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>demo</title>
	<meta name="keywords" content=""/>
	<meta name="description" content=""/>
	<meta name="viewport" content="width=device-width"/>
	<link rel="shortcut icon" href="img/touchicon.png"/>
	<link rel="stylesheet" href=""/>
	<style type="text/css">
		#list{margin:0;padding:0;width:172px;height:200px;overflow-y:auto;}
		li{list-style-type:none;text-align:center;}
		li:hover{background:#cfcfcf;}
		a{color:#333;text-decoration:none;}
	</style>
</head>
<body>
	<input id="opt" type="text">
	<ul id="list" style="display:none;">
		<li><a href=""></a></li>
	</ul>
	<script>
		var arrpro = [];
	    arrpro[0]  = {city_no:1042,city_name:"安徽省"};
	    arrpro[1]  = {city_no:1061,city_name:"山东省"};
	    arrpro[2]  = {city_no:1079,city_name:"江苏省"};
	    arrpro[3]  = {city_no:1093,city_name:"上海市"};
	    arrpro[4]  = {city_no:1095,city_name:"广东省"};
	    arrpro[5]  = {city_no:1117,city_name:"浙江省"};
	    arrpro[6]  = {city_no:1129,city_name:"福建省"};
	    arrpro[7]  = {city_no:1139,city_name:"北京市"};
	    arrpro[8]  = {city_no:1141,city_name:"重庆市"};
	    arrpro[9]  = {city_no:1146,city_name:"甘肃省"};
	    arrpro[10] = {city_no:1161,city_name:"广西省"};
	    arrpro[11] = {city_no:1177,city_name:"贵州省"};
	    arrpro[12] = {city_no:1187,city_name:"海南省"};
	    arrpro[13] = {city_no:1190,city_name:"河北省"};
	    arrpro[14] = {city_no:1202,city_name:"河南省"};
	    arrpro[15] = {city_no:1220,city_name:"黑龙江省"};
	    arrpro[16] = {city_no:1235,city_name:"湖北省"};
	    arrpro[17] = {city_no:1248,city_name:"湖南省"};
	    arrpro[18] = {city_no:1263,city_name:"江西省"};
	    arrpro[19] = {city_no:1275,city_name:"吉林省"};
	    arrpro[20] = {city_no:1285,city_name:"辽宁省"};
	    arrpro[21] = {city_no:1300,city_name:"内蒙古"};
	    arrpro[22] = {city_no:1313,city_name:"宁夏"};
	    arrpro[23] = {city_no:1318,city_name:"青海省"};
	    arrpro[24] = {city_no:1326,city_name:"山西省"};
	    arrpro[25] = {city_no:1338,city_name:"陕西省"};
	    arrpro[26] = {city_no:1349,city_name:"四川省"};
	    arrpro[27] = {city_no:1369,city_name:"天津市"};
	    arrpro[28] = {city_no:1371,city_name:"新疆"};
	    arrpro[29] = {city_no:1388,city_name:"西藏"};
	    arrpro[30] = {city_no:1396,city_name:"云南省"};
	    arrpro[31] = {city_no:1414,city_name:"香港"};
	    arrpro[32] = {city_no:1416,city_name:"澳门"};
	    arrpro[33] = {city_no:1418,city_name:"台湾"};
	    arrpro[34] = {city_no:1420,city_name:"国外"};

	    var listGroup = document.getElementById('list');
	    var optBtn = document.getElementById('opt');
	    var s = '';
	    for (var i = 0; i < arrpro.length; i++) {
	    	s += '<li><a href="#'+arrpro[i].city_no+'">'+arrpro[i].city_name+'</a></li>' ;
	    }
	    listGroup.innerHTML = s ;
	    optBtn.onfocus = function () {
	    	listGroup.style.display = 'block' ;
	    }
	    optBtn.onblur = function () {
	    	listGroup.style.display = 'none' ;
	    }
	</script>
</body>
</html>